<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>QQ企鹅</title>
<style>
*{ margin:0; padding:0;}
div{ position:absolute;}
.qq_body{ width:470px; height:540px; left:100px; top:100px;}
/*QQ头部*/
.head{ z-index:0;left:65px; top:0; width:345px; height:367px; background:#19161A; border-radius:50%;}
/*QQ眼睛*/
.lefteye , .righteye{ width:66px; height:99px; border-radius:50%; background:#fff; left:153px; top:76px; z-index:7; overflow:hidden;}
.eyeball{ width:30px; height:42px; background:#201E1F; border-radius:50%; left:28px;top:34px;}
.eyeball .eyewhite{ width:11px; height:18px; background:#fff; border-radius:50%; left:12px; top:12px;}
.righteye{ left:245px;}
.righteye .eyeball{  left:11px;}
.eyeshadow{ width:66px; height:99px; border-radius:50%; background: rgba(255,153,204,0.9); clip:rect(0 66px 33px 0)}
.eyeshadowwhite{width:65px; height:54px; border-radius:50%; background: rgba(255,255,255,1); top:20px; }
.eyelash_l_1 , .eyelash_r_1 { width:44px; height:44px; border-bottom:2px solid #F6F; border-radius:50%;top:67px;z-index:8 }
.eyelash_l_1 { transform:rotate(15deg); -moz-transform:rotate(15deg); -webkit-transform:rotate(15deg); left:120px; }
.eyelash_r_1{ transform:rotate(340deg); -moz-transform:rotate(340deg); -webkit-transform:rotate(340deg); right:124px; }
.eyelash_l_2 , .eyelash_r_2 { width:44px; height:44px; border-radius:50%; top:60px;z-index:8 }
.eyelash_l_2 {transform:rotate(125deg); -moz-transform:rotate(125deg); -webkit-transform:rotate(125deg); left:123px; border-right:2px solid #F6F; }
.eyelash_r_2{transform:rotate(245deg); -moz-transform:rotate(245deg); -webkit-transform:rotate(245deg); right:124px;  border-left:2px solid #F6F;}
/*QQ嘴巴*/
.mouth_box{ width:344px; height:188px; top:102px; left:66px; border-radius:50%; z-index:6;background:#19161A;}
.mouth{ width:234px; height:70px; border-radius:50%; background:#FC9202; left:52px; bottom:35px;}
.mouth .mark{ width:160px; height:84px; border:8px solid #201E1F; border-left:1px solid #201E1F; border-right:1px solid #201E1F; border-radius:50%;
clip:rect(65px 160px  100px  0); left:32px; top:-25px;}
/*QQ蝴蝶结*/
.bowknot{ width:200px; height:80px;  left:250px; top:0; z-index:9;  transform:rotate(35deg);-moz-transform:rotate(35deg); -webkit-transform:rotate(35deg); -o-transform:rotate(35deg); }
.bowknot_l{ width:40%; height:80px; background:#F02F72; border-radius:40px 95px 95px 40px; left:0;border:1px solid #F3F;}
.bowknot_c{ width:20%; height:60px;background:#F02F72; border-radius:30px;  left:30%; top:10px; border:1px solid #F3F; z-index:10; box-shadow:0 0 5px 3px rgba(0,0,0,0.2) }
.bowknot_r{ width:40%; height:80px; background:#F02F72; border-radius:95px 40px 40px 95px; left:40%;}
.bowknot_tip_l , .bowknot_tip_r{ width:6px; height:35px; border-radius:50%; background:rgba(255,255,255,1); top:20px; z-index:11;}
.bowknot_tip_l{ left:-4px;border-right:1px solid #F3F;}
.bowknot_tip_r{right:36px; border-left:1px solid #F3F;}
.bowknot_line1{ width:55px; height:25px; border-bottom:3px solid rgba(102,102,102, 0.4); transform:rotate(-20deg); -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -o-transform:rotate(-10deg); top:9px; left:0; border-radius:20%;}
.bowknot_line2{ width:45px; height:25px; border-top:2px solid rgba(102,102,102, 0.6); transform:rotate(10deg); -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg); top:42px; left:0; border-radius:20%;}
.bowknot_line3{ width:45px; height:25px; border-bottom:3px solid rgba(102,102,102, 0.4); transform:rotate(10deg); -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg); top:5px; right:0; border-radius:20%;}
.bowknot_line4{ width:55px; height:25px; border-top:1px solid rgba(102,102,102, 0.6); transform:rotate(-10deg); -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -o-transform:rotate(-10deg); top:39px; right:0; border-radius:20%;}
/*QQ身体*/
.belly{ width:385px; height:322px; left:45px; top:185px; z-index:1; background:#19161A; border-radius:50%;}
.belly_white{ width:315px; height:250px; background:#fff; border-radius:50%; left:34px; bottom:10px;}
/*QQ围巾*/
.scarf{ width:355px; height:198px; background:#F02F72; border-radius:50%; z-index:5; left:60px; top:155px; box-shadow:0 5px 10px rgba(0,0,0 , 0.4) , 0 0 30px rgba(0,0,0 , 0.3) inset;}
.scarf_d{ width:80px; height:110px; border-radius:15px 15px 18px 35px;;background:#F02F72; left:110px; top:325px; transform:rotate(15deg); -moz-transform:rotate(15deg); -webkit-transform:rotate(15deg); -o-transform:rotate(15deg); z-index:4; box-shadow:0 3px 10px rgba(0,0,0 , 0.4) , 0 0 30px rgba(0,0,0 , 0.3) inset;}
/*QQ翅膀*/
.leftwing , .rightwing{ width:50px; height:170px; background:#1A1624; border-radius:50%;top:270px; }
.leftwing { left:10px; transform:rotate(25deg); -moz-transform:rotate(25deg); -webkit-transform:rotate(25deg); -o-transform:rotate(25deg); }
.rightwing{ right:10px;transform:rotate(-25deg); -moz-transform:rotate(-25deg); -webkit-transform:rotate(-25deg); -o-transform:rotate(-25deg);}
/*QQ脚掌*/
.leftsole , .rightsole{ width:157px; height:82px; background:#F07203;  top:455px; border-radius:50%; border:3px solid #872E0C; box-shadow:0 0 20px 5px rgba(0,0,0,0.3);}
.leftsole {left:55px; transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg);}
.rightsole{right:55px;transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg);}
.leftsole .toe , .rightsole .toe{ width:60px; height:22px; background:#F07203; border-radius:50%; border-top:1px solid  #872E0C; }
.leftsole .toe{ transform:rotate(-20deg); -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg);border-left:3px solid  #872E0C;}
.rightsole .toe{ right:0; transform:rotate(20deg); -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); border-right:3px solid  #872E0C;}

</style>
</head>

<body>
<div class="qq_body">
    <div class="head"></div>
    <div class="bowknot">
       <div class="bowknot_l">
       <div class="bowknot_line3"></div>
        <div class="bowknot_line4"></div>
       </div>
       <div class="bowknot_c"></div>
       <div class="bowknot_r">
        <div class="bowknot_line1"></div>
        <div class="bowknot_line2"></div>
       </div>
       <div class="bowknot_tip_l"></div>
       <div class="bowknot_tip_r"></div>
    </div>
     <div class="eyelash_l_1"></div>
      <div class="eyelash_l_2"></div>
       <div class="eyelash_r_1"></div>
       <div class="eyelash_r_2"></div>
    <div class="lefteye">
     <div class="eyeshadow"></div>
     <div class="eyeshadowwhite"></div>
    <div class="eyeball">
     <div class="eyewhite"></div>
    </div>
    </div>
    <div class="righteye">
      <div class="eyeshadow"></div>
     <div class="eyeshadowwhite"></div>
      <div class="eyeball">
     <div class="eyewhite"></div>
    </div>
    </div>
    <div class="mouth_box">
     <div class="mouth">
      <div class="mark"></div>
     </div> 
    </div>
    <div class="belly">
    <div class="belly_white"></div>
    </div>
    <div class="scarf"></div>
    <div class="scarf_d"></div>
    <div class="leftwing"></div>
    <div class="rightwing"></div>
    <div class="leftsole">
      <div class="toe"></div>
    </div>
     <div class="rightsole">
        <div class="toe"></div>
     </div>
</div>
</body>
</html>